<template>
	<view class="card">
		<view class="flex align-center padding justify-between solid-bottom">
			<text class="basis-df text-cut">{{getCity}}</text>
			<view class="" @tap="toLocation">
				<text class="padding-right-xs ">重新定位</text>
				<uni-icons type="map-pin-ellipse" color="#fbbd08"></uni-icons>
			</view>
		</view>
		<view class="flex justify-between align-center padding solid-bottom" @tap="showDate">
			<view class="flex flex-direction align-center">
				<text class="text-sm padding-xs">入住</text>
				<text>{{startDay | date('mm月dd日')}}</text>
			</view>
			<view class="flex flex-direction align-center">
				<text>共{{daynum}}晚</text>
			</view>
			<view class="flex flex-direction align-center">
				<text class="text-sm padding-xs">离开</text>
				<text>{{endDay | date('mm月dd日')}}</text>
			</view>
		</view>
		<!-- 选择住店期 -->
		<u-calendar 
		v-model="show" 
		:mode="mode" 
		start-text="住店"
		end-text="离店"
		btn-type="warning"
		range-bg-color="#FFDB49"
		range-color="#fff"
		active-bg-color="#FFAD01"
		:min-date="minDate"
		:max-date="maxDate"
		@change="chooseDate"
		>
			<view slot="tooltip">
				<view class="text-center text-lg padding">
					请选择住店/离店时间
				</view>
			</view>
		</u-calendar>
		<view class="block padding">
			<button  class="cu-btn shadow-blur lg round block btn-yellow text-white">开始搜索</button>
		</view>
	</view>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
export default {
	data(){
		return{
			show:false,
			mode:'range',
			minDate:'',
			maxDate:'',
			startDay:'',
			endDay:'',
		}
	},
	computed:{
		...mapGetters(['getCity']),
		daynum(){
			return Math.round((this.endDay - this.startDay)/(1000*60*60*24*1))
		}
	},
	mounted() {
		this.initDate();
	},
	methods:{
		...mapActions(['setLocation']),
		...mapActions(['setCity']),
		// 住店时间为最近30天
		initDate(){
			this.startDay = new Date().getTime();
			this.endDay = new Date().getTime()+1000*60*60*24*1;
			this.minDate = this.$u.timeFormat(new Date().getTime(),'yyyy-mm-dd');
			this.maxDate = this.$u.timeFormat(new Date().getTime()+1000*60*60*24*30,'yyyy-mm-dd');
		},
		toLocation(){
			uni.chooseLocation({
				success: (res) => {
					console.log("res",res);	
					this.setLocation({
						latitude:res.latitude,
						longitude:res.longitude
					})
					this.setCity(res.address)
				}
			})
		},
		// 开始选择
		showDate(){
			this.show = true;
		},
		// 选择住店离店日期
		chooseDate(e){
			console.log("e",e);
			this.startDay = new Date(e.startDate).getTime();
			this.endDay = new Date(e.endDate).getTime();
		}
	}
}
</script>

<style lang="scss" scoped>
.btn-yellow{
	background-color: #FFAD01;
}
.card{
	width: 96vw;
	border-radius: 10rpx;
	background-color: rgba(255,255,255,.9);
	box-shadow: 0 10rpx 20rpx 4rpx rgba(0,0,0,.1);
	margin: 20rpx auto;
	position: relative;
	box-sizing: border-box;
	padding:10rpx 30rpx 20rpx;
}
.title{
	color: #222;
	text-align: center;
	padding: 20rpx 0 0 0;
}
</style>
